<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>详细库存</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="仓库">
            <el-select placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option label="主仓库" value="main"></el-option>
              <el-option label="分仓库A" value="branchA"></el-option>
              <el-option label="分仓库B" value="branchB"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="物料编码">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="批次号">
            <el-input placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="warning" icon="el-icon-download">导出</el-button>
          </el-form-item>
        </el-form>
        
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="warehouse" label="仓库" width="120"></el-table-column>
          <el-table-column prop="code" label="物料编码" width="120"></el-table-column>
          <el-table-column prop="name" label="物料名称" width="150"></el-table-column>
          <el-table-column prop="spec" label="规格型号" width="120"></el-table-column>
          <el-table-column prop="batch" label="批次号" width="100"></el-table-column>
          <el-table-column prop="quantity" label="库存数量"></el-table-column>
          <el-table-column prop="unit" label="单位" width="80"></el-table-column>
          <el-table-column prop="cost" label="单位成本" width="100"></el-table-column>
          <el-table-column prop="amount" label="金额" width="100"></el-table-column>
          <el-table-column prop="location" label="库位" width="100"></el-table-column>
          <el-table-column prop="inDate" label="入库日期" width="120"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'StkInventoryList',
  data() {
    return {
      tableData: [
        {
          warehouse: '主仓库',
          code: 'M001',
          name: 'A型原材料',
          spec: '100*100*1.0',
          batch: '20240420-01',
          quantity: 500,
          unit: '件',
          cost: 5.5,
          amount: 2750,
          location: 'A-01-01',
          inDate: '2024-04-20'
        },
        {
          warehouse: '主仓库',
          code: 'M001',
          name: 'A型原材料',
          spec: '100*100*1.0',
          batch: '20240423-01',
          quantity: 500,
          unit: '件',
          cost: 5.5,
          amount: 2750,
          location: 'A-01-02',
          inDate: '2024-04-23'
        },
        {
          warehouse: '分仓库A',
          code: 'M002',
          name: 'B型半成品',
          spec: '200*50*2.0',
          batch: '20240421-01',
          quantity: 300,
          unit: '个',
          cost: 10.8,
          amount: 3240,
          location: 'B-02-01',
          inDate: '2024-04-21'
        },
        {
          warehouse: '分仓库B',
          code: 'M003',
          name: 'C型成品',
          spec: '成品规格',
          batch: '20240422-01',
          quantity: 150,
          unit: '台',
          cost: 100,
          amount: 15000,
          location: 'C-03-01',
          inDate: '2024-04-22'
        }
      ]
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style> 